<template>
  <div class="upload-score-container">
    <div class="upload-card">
      <h2 class="upload-title">上传谱子</h2>
      <el-form :model="form" ref="formRef" class="upload-form">
        <el-form-item label="谱子名称" prop="title" class="upload-form-item">
          <el-input v-model="form.title" placeholder="请输入谱子名称" class="upload-input" />
        </el-form-item>
        <el-form-item label="MP3文件" prop="file" class="upload-form-item">
          <el-upload
            class="upload-uploader"
            drag
            action=""
            :auto-upload="false"
            :show-file-list="true"
            :file-list="fileList"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            accept="audio/mp3"
          >
            <i class="el-icon-upload upload-icon"></i>
            <div class="el-upload__text">将MP3文件拖到此处，或 <em>点击上传</em></div>
            <div class="el-upload__tip">仅支持mp3格式，最大20MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item class="upload-form-item">
          <el-button type="primary" class="upload-btn" :loading="loading" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UploadScore',
  data() {
    return {
      form: {
        title: '',
        file: null
      },
      fileList: [],
      loading: false
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.form.file = file.raw
      this.fileList = fileList
    },
    beforeUpload(file) {
      const isMp3 = file.type === 'audio/mp3' || file.type === 'audio/mpeg'
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isMp3) {
        this.$message.error('只能上传mp3格式的音频文件！')
      }
      if (!isLt20M) {
        this.$message.error('文件大小不能超过20MB！')
      }
      return isMp3 && isLt20M
    },
    handleRemove() {
      this.form.file = null
      this.fileList = []
    },
    submitForm() {
      if (!this.form.title) {
        this.$message.error('请输入谱子名称！')
        return
      }
      if (!this.form.file) {
        this.$message.error('请上传MP3文件！')
        return
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$message.success('上传成功！')
        this.form.title = ''
        this.form.file = null
        this.fileList = []
      }, 1200)
    }
  }
}
</script>

<style scoped>
.upload-score-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7f8fa 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 90px;
}
.upload-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 40px 36px 32px 36px;
  width: 420px;
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 32px;
  letter-spacing: 1px;
}
.upload-form {
  width: 100%;
}
.upload-form-item {
  margin-bottom: 28px;
}
.upload-input >>> .el-input__inner {
  border-radius: 8px;
  height: 40px;
  font-size: 15px;
}
.upload-uploader {
  width: 100%;
}
.upload-icon {
  font-size: 38px;
  color: #409eff;
  margin-bottom: 12px;
}
.upload-btn {
  width: 100%;
  height: 42px;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
}
.el-upload__text {
  color: #666;
  font-size: 14px;
  margin-bottom: 6px;
}
.el-upload__tip {
  color: #aaa;
  font-size: 12px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .upload-card {
    padding: 18px 6vw 18px 6vw;
    width: 98vw;
  }
  .upload-title {
    font-size: 1.1rem;
    margin-bottom: 18px;
  }
}
</style> 